import React, { useEffect, useState } from "react";
import { Layout, Menu, Button, Row, Col, Space,Spin  } from "antd";
import {
    LogoutOutlined
} from "@ant-design/icons";
import { Outlet, useNavigate,useLocation } from 'react-router-dom'
import { getToken } from "../../services/user";
const { Header, Content, Sider } = Layout;
const items = [
    { label: "学生管理", key: "/manage/student" }, 
    { label: "班级管理", key: "/manage/class" },
    { label: "老师管理", key: "/manage/teacher" },
];
export default function Manage() {
    const navigate = useNavigate();
    const location = useLocation();
    const [user,setUser] = useState({});
    const [loaded,setLoaded] = useState(false);
    const handleSelect = ({key}) => {
        navigate(key);
    }
    const getUser = async () =>{
        let {data} = await getToken();
        console.log(data);
        setUser(data);
        setLoaded(true);
    }
    const handleLogout = () => {
        localStorage.clear("token");
        navigate("/login");
    }
    useEffect(() => {
       getUser();
    },[user._id]);
    if(!loaded){
        return <div>
            <Spin size={50}></Spin>
        </div>
    }
    return (
        <Layout>
            <Header className="header">
                <Row>
                    <Col span={4}>
                        <h1 style={{ color: "white" }}>学生管理系统</h1>
                    </Col>
                    <Col offset={18} span={2}>
                        <Space size={10}>
                            <span style={{ color: "white" }}>{user.username}</span>
                            <Button
                                type="primary"
                                shape="circle"
                                icon={<LogoutOutlined />}
                                size={20}
                                onClick={handleLogout}
                            />
                        </Space>
                    </Col>
                </Row>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        style={{
                            height: "100%",
                            borderRight: 0,
                        }}
                        selectedKeys={location.pathname}
                        items={items}
                        onSelect={handleSelect}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: "0 24px 24px",
                    }}
                >
                  
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}
